<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">购买二手车页面</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>

    <el-row>
      <el-col :span="2" v-for="(o, index) in listData" :key="index" :offset="1">
        <el-card :body-style="{ padding: '10px 10px',margin:'20px 10px' }" style="width: 160px;height: 340px;">
          <el-image class="image" style="width: 100px; height: 100px" :src="o.img" :preview-src-list="o.img | filterImg"/>  <!--需要图片过滤器-->
          <div style="padding: 14px;">
            <span style="font-size: 10px;">{{o.name}}</span>
            <div class="bottom clearfix" style="position:absolute; bottom:40px;padding: 0px 50px 0px 0px;margin: 0px 50px 0px 0px;">
              <time class="time">￥{{o.price}}</time>
              <router-link :to="{path:'buyerCarDetails',query:{id:o.id}}">
                <el-button type="text" class="button" style="position: absolute;right: 0px">购买</el-button>
              </router-link>

            </div>
          </div>
        </el-card>
        <br>
      </el-col>
    </el-row>
  </div>




</template>

<script>
    // import { deptList, deptSave, deptDelete } from '../../api/userMG'
    export default {
        data() {
            return {
                currentDate: new Date(),
                listData: [], //二手车数据

            }
        },
        created() {
            this.getdata();
        },
        filters: {
            // 图片预览过滤
            filterImg(item) {
                if (typeof item === "string") {
                    return item.split("|");
                }else{
                    return item
                }
            },
        },

        /**
         * 里面的方法只有被调用才会执行
         */
        methods: {

            // 获取公司列表
            getdata() {
                // 表格加载开始
                const _this = this;

                let res;
                axios.get(localStorage.getItem("globalUrl") + "car/findAllBySftg").then(function(resp){

                    _this.listData = resp.data.data;

                    // 表格加载结束
                    _this.loading = false
                });


            },

        }
    }
</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>

